<div class="components_TopicDialog_TopicDialog">
  <el-dialog :visible="visible" width="900px" :title="title" @close="handleClose" @open="handleDialogOpen">
    <div class="dialog-content">
      <!-- 左侧设置区域 -->
      <div class="dialog-left">
        <div class="block-type">
          <div class="title">题目类型</div>
          <div class="button-group-father">
            <el-button-group class="button-group">
              <div class="button-row">
                <el-button v-for="type in questionTypes.slice(0, 2)" :key="type.value"
                  :type="selectedType === type.value ? 'primary' : 'default'" @click="handleTypeClick(type.value)"
                  class="flex-button">
                  {{ type.label }}
                </el-button>
              </div>
              <div class="button-row">
                <el-button v-for="type in questionTypes.slice(2, 4)" :key="type.value"
                  :type="selectedType === type.value ? 'primary' : 'default'" @click="handleTypeClick(type.value)"
                  class="flex-button">
                  {{ type.label }}
                </el-button>
              </div>
              <div class="button-row full-width-row">
                <el-button v-for="type in questionTypes.slice(4, 5)" :key="type.value"
                  :type="selectedType === type.value ? 'primary' : 'default'" @click="handleTypeClick(type.value)"
                  class="full-width-button">
                  {{ type.label }}
                </el-button>
              </div>
            </el-button-group>
          </div>
        </div>

        <!-- 其他设置区域 -->
        <div class="block">
          <div class="title">题目难度</div>
          <el-button-group>
            <el-button v-for="level in difficultyLevels" :key="level.value"
              :type="selectedDifficulty === level.value ? 'primary' : 'default'"
              @click="handleDifficultyClick(level.value)">
              {{ level.label }}
            </el-button>
          </el-button-group>
        </div>

        <div class="block">
          <div class="title">题目数量</div>
          <el-input-number v-model="questionCount" @change="handleCountChange" :min="1" :max="10" size="small" />
        </div>

        <div class="block">
          <div class="title">场景应用</div>
          <el-button-group>
            <el-button v-for="scenario in difficultyScenario" :key="scenario.value"
              :type="selectedScenario === scenario.value ? 'primary' : 'default'"
              @click="handleScenarioClick(scenario.value)">
              {{ scenario.label }}
            </el-button>
          </el-button-group>
        </div>

        <div class="block">
          <div class="title">题目生成提示语</div>
          <el-input :value="promptText" type="textarea" :rows="4" @input="handleTextChange" />
        </div>

        <el-button type="primary" @click="generateQuestions">
          生成题目
        </el-button>
      </div>

      <!-- 右侧题目展示区域 -->
      <div class="dialog-main-content">
        <div class="dialog-right">
          <div v-if="loading" class="loading">
            <el-loading-spinner />
          </div>
          <div v-else class="question-list">
            <div v-for="(question, index) in questions" :key="index" class="question-item">
              <div class="question-header">
                <div class="question-type-difficulty">
                  <el-tag>{{ question.type }}</el-tag>
                  <el-tag :type="question.difficultyTag">{{ question.difficulty }}</el-tag>
                </div>
                <div class="question-actions">
                  <span class="knowledge-point">知识点：{{ chapter.label }}</span>
                  <el-button type="primary" size="mini" @click="editQuestion(question, index)">编辑</el-button>
                </div>
              </div>
              <div class="question-desc">
                <strong>题目描述：</strong><br />{{ question.description }}
              </div>
              <div v-if="question.options && question.options.length" class="options">
                <div v-for="option in question.options" :key="option.letter || option.text" class="option-item">
                  <span :class="{'correct-answer': option.isCorrect}">
                    <strong v-if="option.letter">{{ option.letter }}.</strong> {{ option.text }}
                  </span>
                </div>
              </div>
              <div class="answer">
                <strong>参考答案：</strong><br />
                <span class="correct-answer">{{ formatAnswerDisplay(question.answer) }}</span>
              </div>
              <div class="analysis"><strong>题目解析：</strong><br />{{ question.analysis }}</div>
              <div class="scoring"><strong>评分标准：</strong><br />{{ question.scoring }}</div>
            </div>
          </div>
        </div>

        <!-- 底部按钮区域 -->
        <div v-if="questions.length > 0" class="dialog-footer-area">
          <el-button @click="generateQuestions">重新生成</el-button>
          <div class="bottom-button">
            <el-button @click="saveDraft">保存草稿</el-button>
            <el-button @click="confirmPublish">确认发布</el-button>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>

  <!-- 添加编辑 dialog -->
  <el-dialog :title="isEditMode ? '编辑题目' : '新增题目'" :visible.sync="editDialogVisible" width="50%">
    <el-form ref="editForm" :model="editForm" :rules="formRules">
      <!-- 题干输入框 -->
      <el-form-item label="题干" prop="question">
        <el-input v-model="editForm.question" type="textarea" placeholder="请输入题目题干"></el-input>
      </el-form-item>

      <!-- 题目类型选择框 -->
      <el-form-item label="题目类型" prop="type">
        <el-select v-model="editForm.type" placeholder="请选择题目类型">
          <el-option v-for="type in questionTypes" :key="type.value" :label="type.label" :value="type.value">
          </el-option>
        </el-select>
      </el-form-item>

      <!-- 选择题/多选题的选项 -->
      <el-form-item v-if="editForm.type === 1 || editForm.type === 3" label="选项个数">
        <el-select v-model="editForm.optionCount" placeholder="请选择选项数量" @change="handleOptionCountChange">
          <el-option v-for="n in 5" :key="n" :label="n" :value="n"></el-option>
        </el-select>
      </el-form-item>

      <!-- 选项输入框 -->
      <el-form-item v-if="editForm.optionCount > 0 && (editForm.type === 1 || editForm.type === 3)" label="选项">
        <div v-for="(option, index) in editForm.optionsLev" :key="index" class="option-input">
          <el-input v-model="editForm.optionsLev[index]" :placeholder="'请输入选项 ' + String.fromCharCode(65 + index)">
          </el-input>
        </div>
      </el-form-item>

      <!-- 根据题目类型显示不同的答案输入方式 -->
      <el-form-item label="答案" prop="answer">
        <!-- 单选题答案 -->
        <el-select v-if="editForm.type === 1" v-model="editForm.answer" placeholder="请选择答案">
          <el-option v-for="(_, index) in editForm.optionsLev" :key="index" :label="String.fromCharCode(65 + index)"
            :value="String.fromCharCode(65 + index)">
          </el-option>
        </el-select>

        <!-- 判断题答案 -->
        <el-radio-group v-if="editForm.type === 2" v-model="editForm.answer">
          <el-radio label="正确">正确</el-radio>
          <el-radio label="错误">错误</el-radio>
        </el-radio-group>

        <!-- 多选题/填空题答案 -->
        <el-input v-if="editForm.type === 3 || editForm.type === 4" v-model="editForm.answer"
          placeholder="请输入答案（多个选项用 ; 分隔）">
        </el-input>

        <!-- 简答题答案 -->
        <el-input v-if="editForm.type === 5" type="textarea" v-model="editForm.answer" placeholder="请输入答案">
        </el-input>
      </el-form-item>

      <!-- 难度等级 -->
      <el-form-item label="难度等级" prop="lev">
        <el-select v-model="editForm.lev" placeholder="请选择难度等级">
          <el-option v-for="level in difficultyLevels" :key="level.value" :label="level.label" :value="level.value">
          </el-option>
        </el-select>
      </el-form-item>

      <!-- 解析 -->
      <el-form-item label="解析" prop="analysis">
        <el-input v-model="editForm.analysis" type="textarea" placeholder="请输入解析"></el-input>
      </el-form-item>
      <div class="dialog-Edit-footer">
        <!-- 按钮区域 -->
        <el-form-item style="text-align: right;">
          <el-button @click="cancelEdit">取消</el-button>
          <el-button type="primary" @click="saveEdit">确定</el-button>
        </el-form-item>
      </div>
    </el-form>
  </el-dialog>
</div>